<script setup>
  import { reactive, onMounted } from 'vue'
  import DateRangePicker from '@/views/component/DateRangePicker'

  const props = defineProps({
    configList: Object,
  })

  console.log('props.configList', props.configList)
  const emit = defineEmits(['search', 'reset'])

  const form = reactive({})
  const formRef = ref(null)
  const controlList = props.configList.controlList
  const config = props.configList.config

  const resetFormFields = () => {
    formRef.value.resetFields()
  }
  const dateRangePickerRef = ref('')
  const reset = () => {
    form.create_time_start = ''
    form.create_time_end = ''
    dateRangePickerRef.value && dateRangePickerRef.value[0].resetDate()
    emit('reset')
  }

  onMounted(() => {
    console.log('props.itemList', controlList)
    controlList.map((item) => {
      if (item.type === 'dateRange' && item.type === 'datetimerange') {
        form[item.start] = ''
        form[item.end] = ''
      } else {
        form[item.prop] = item.initValue ? item.initValue : ''
      }
    })
  })
  defineExpose({
    resetFormFields,
  })
</script>

<template>
  <vab-query-form>
    <vab-query-form-left-panel
      :span="
        config.layoutType === 1
          ? config.leftPanelWidth > 0
            ? config.leftPanelWidth
            : 20
          : 24
      "
    >
      <el-form ref="formRef" :model="form" inline>
        <template v-for="(item, index) in controlList" :key="index">
          <el-form-item :prop="item.prop" style="padding-right: 10px">
            <el-select
              v-if="item.type === 'select'"
              v-model="form[item.prop]"
              :placeholder="`请选择${item.label}`"
              :style="{ width: item.width ? item.width : '150px' }"
              clearable
              filterable
            >
              <el-option
                v-for="i in item.list"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
            <el-date-picker
              v-if="item.type === 'date'"
              v-model="form[item.prop]"
              :placeholder="`请选择${item.label}`"
              :value-format="
                item.valueFormat === 'Timestamp' ? 'x' : 'YYYY-MM-DD'
              "
              clearable
            />
            <date-range-picker
              v-if="item.type === 'dateRange'"
              v-model:end="form[item.end]"
              v-model:start="form[item.start]"
              :value-format="
                item.valueFormat === 'Timestamp' ? 'x' : 'YYYY-MM-DD'
              "
              @change="
                (event) => {
                  emit('dateRange', event)
                }
              "
            />
            <date-range-picker
              ref="dateRangePickerRef"
              v-if="item.type === 'datetimerange'"
              v-model:end="form[item.end]"
              v-model:start="form[item.start]"
              type="datetimerange"
              :value-format="
                item.valueFormat === 'Timestamp' ? 'x' : 'YYYY-MM-DD HH:mm:ss'
              "
              @change="
                (event) => {
                  emit('datetimerange', event)
                }
              "
            />
            <el-input-number
              v-if="item.type === 'number'"
              v-model.trim="form[item.prop]"
              :placeholder="`请输入${item.label}`"
              :style="{ width: item.width ? item.width : '150px' }"
              clearable
            />
            <el-input
              v-if="item.type === 'input'"
              v-model.trim="form[item.prop]"
              :placeholder="`请输入${item.label}`"
              :style="{ width: item.width ? item.width : '150px' }"
              clearable
              @keyup.enter.native="emit('search', form)"
            />
          </el-form-item>
        </template>
        <el-form-item>
          <el-button icon="Search" type="primary" @click="emit('search', form)">
            查询
          </el-button>
          <el-button icon="Refresh" plain type="primary" @click="reset">
            重置
          </el-button>
          <slot name="leftSlot"></slot>
        </el-form-item>
      </el-form>
    </vab-query-form-left-panel>
    <template v-if="config.layoutType === 1">
      <vab-query-form-right-panel
        :span="
          config.layoutType === 1
            ? config.leftPanelWidth > 0
              ? 24 - config.leftPanelWidth
              : 4
            : 24
        "
      >
        <slot name="rightSlot"></slot>
      </vab-query-form-right-panel>
    </template>
    <template v-if="config.layoutType === 2">
      <vab-query-form-left-panel :span="24">
        <slot name="rightSlot"></slot>
      </vab-query-form-left-panel>
    </template>
  </vab-query-form>
</template>
